{% extends 'frontend/base.html' %}
{% load static %}
{% block PageSearch %}
    <div class="col-lg-10 offset-lg-1">
        <form class="sow-search d-block" action="{% url 'home' %}">
            <div class="sow-search-input w-100">
                <!-- rounded: form-control-pill -->
                <div class="input-group-over d-flex align-items-center w-100 h-100 rounded">
                    <input placeholder="暂只支持标签搜索，全文搜索即将推出！" required name="tag"
                           type="text"
                           class="form-control-sow-search form-control form-control-custom border-0 text-white bg-diff"
                           value="" autocomplete="off">

                    <span class="sow-search-buttons">
                                <!-- search button -->
                                <button aria-label="Global Search" type="submit"
                                        class="btn shadow-none m-0 px-3 py-2 bg-transparent text-white">
                                    <i class="fi fi-search fs-5 m-0"></i>
                                </button>
							</span>
                </div>

            </div>

            <!-- search suggestion container -->
            <div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
                <div class="sow-search-container-wrapper">

                    <!-- main search container -->
                    <div class="sow-search-loader p-3 text-center hide">
                        <i class="fi fi-circle-spin fi-spin text-muted fs-1"></i>
                    </div>

                    <!--
                        AJAX CONTENT CONTAINER
                        SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
                    -->
                    <div class="sow-search-content rounded w-100 scrollable-vertical"></div>

                </div>
            </div>
            <!-- /search suggestion container -->
            <div class="sow-search-backdrop backdrop-dark hide">
                <!-- alternate: overlay-dark opacity-3 --></div>

        </form>
        <!-- /SEARCH -->
    </div>
{% endblock %}
{% block Content %}
    <!-- PAGE TITLE -->
    <div class="section pb-4 pt-5">
        <div class="container">
            <div class="col-12 col-lg-10 offset-lg-1">
                <h1 class="h2 fw-bold">文章列表</h1>
            </div>
        </div>
    </div>
    <!-- /PAGE TITLE -->
    <!-- start :: help center -->
    <div class="section py-4 mb-5">
        <div class="container">

            <div class="bg-white rounded shadow-xs p-4 px-lg-5 col-lg-10 offset-lg-1">

                {% for article in articles %}
                    <a href="{% url 'front-article:article-detail' article.id %}"
                       class="d-block border-bottom text-decoration-none text-dark transition-hover-top transition-all-ease-250 py-4">

                        <h3 class="text-primary fs-5">{{ article.title }}</h3>
                        <p>
                            {{ article.abstract }}
                        </p>
                        <p>
                            {% for tag in article.tags.all %}
                                <span class="badge rounded-pill bg-secondary-soft"># {{ tag.name }}</span>
                            {% endfor %}
                        </p>
                    </a>
                {% endfor %}

                <!-- pagination : center -->
                <nav class="text-center my-3" aria-label="Pagination">
                    {% block pagination %}
                        {% include 'pagination2.html' %}
                    {% endblock %}
                </nav>
                <!-- /pagination : center -->
            </div>

        </div>
    </div>
    <!-- end :: help center -->
{% endblock %}